<template>
  <view
    class="xy-search flex ovh"
    :style="{
      background: data.params.bgColor,
      height: data.params.height + 'rpx',
      'line-height': data.params.height + 'rpx',
      margin: '0 ' + data.params.lrmargin + 'rpx',
      'border-radius': data.params.borderRadius + 'rpx;padding: 0 30rpx',
    }"
    @tap="$xyfun.to('/pages/search')"
  >
    <view :style="css.tcl">{{ data.params.tiptext }}</view>
    <text class="xyicon icon-search m-l-auto" :style="css.tcmc"></text>
  </view>
</template>
<script>
export default {
  name: "xySearch",
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          name: "搜索组件",
          type: "search",
          params: [],
        };
      },
    },
    type: {
      type: String,
      default: "store",
    },
    shopData: {
      type: Object,
      default() {},
    },
  },
  data() {
    return {
      css: this.$xyfun.css(),
      location: "",
      storeList: [],
      store: {
        address: "",
        distance: "",
        id: "",
        lat: "",
        lng: "",
        name: "",
        stores: [],
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
.xy-search {
  flex-wrap: nowrap;
  input {
    width: 100%;
    height: 64rpx;
    margin: 0;
    line-height: 64rpx;
  }
}
.store {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  image {
    width: 36rpx;
    height: 36rpx;
  }
}
.store-list {
  height: calc(100vh - 100rpx);
  overflow-y: auto;
  border-radius: 20rpx 20rpx 0 0;
  background: #fafafb;
  padding: 20rpx;
  .store-item {
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    .store-item-name {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .store-shops {
      .store-shop-item {
        border-radius: 10rpx;
        margin-top: 20rpx;
        padding: 20rpx;
        box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
        view {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          line-height: 60rpx;
        }
        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }
        .store-shop-item-name {
          margin-bottom: 10rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}
</style>
